<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 100vh;
            /* 屏幕高度 */
        }

        .box>img {
            left: calc(50% - 25px);
            top: calc(100% - 25px);
            z-index: 100;
            position: absolute;
        }

        .zidan {
            position: absolute;
            top: calc(100% -62px);
            left: calc(50% -25px);
            width: 10px;
            height: 40px;
            border-top: 1px solid #f00;
            background-image: linear-gradient(rgb(255, 47, 0), rgb(255, 221, 0), rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
            border-top-left-radius: 100%;
            border-top-right-radius: 100%;
            transition: top 0s linear;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./img/bd.png" alt="">
    </div>
    <script>
        var img = document.querySelector(".box>img");
        var box = document.querySelector(".box");

        // 1. 添加事件

        function aaa(e) {
            if (e.keyCode < 37 || e.keyCode > 40) return;
            var l = img.getBoundingClientRect().x;
            var y = img.getBoundingClientRect().y;
            // getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。



        }
        document.addEventListener("mousemove", function (e) {
            img.style.left = e.clientX - 48 + "px";
            img.style.top = e.clientY - 40 + "px";
        })
        box.onclick = function () {
            // 创建标签对象 span
            var span = document.createElement("span");
            span.classList.add("zidan");
            box.appendChild(span);// 通过ClassList.add()可以向元素添加一个或多个类名;


            var sl = img.getBoundingClientRect().x + img.offsetWidth / 2 - span.offsetWidth / 2;
            var st = img.getBoundingClientRect().y + img.offsetHeight / 2;

            span.style.left = sl + "px";
            span.style.top = st + "px";

            setTimeout(function () {
                span.style.transitionDuration = "0.3s";
                span.style.top = -40 + "px";
            }, 4);


            setTimeout(function () {
                box.replaceChild(span);
            }, 310)

        }
    </script>

</body>

</html>